<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()

const ruleFormRef = ref()
// 保存输入框输入的内容
const ruleForm = reactive({
  account: '',
  password: ''
})

// 验证账户(邮箱验证)
const validatAccount = (rule, value, callback) => {
  var regx = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
  if (value === '') {
    callback(new Error('账户名不能为空'))
  } else if (regx.test(value) == false) {
    callback(new Error('请输入正确的账户（邮箱）'))
  }
  else {
    callback()
  }
}

// 验证密码
const validatePass = (rule, value, callback) => {
  var regx = /^[A-Za-z0-9]\w{5,15}$/
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else if (regx.test(value) == false) {
    callback(new Error('请输入正确的密码格式（6到16位有字母数字组成）'))
  }
  else {
    callback()
  }
}


// 给输入框添加验证
const rules = reactive({
  account: [{ validator: validatAccount, trigger: 'blur' }],
  password: [{ validator: validatePass, trigger: 'blur' }],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 输入框验证通过 可以发起登录请求
      axios({
        url: "http://124.71.66.63:9090/user/login",
        method: "POST",
        data: {
          account: ruleForm.account,
          password: ruleForm.password
        }
        ,headers: { 'content-type': 'application/x-www-form-urlencoded' }
      }).then(res => {
        if (res.data.isSuccess == true) {
          ElMessage({
            message: '登陆成功',
            type: 'success',
          })
          // 将token保存到本地
          localStorage.setItem('token',res.data.data)
          localStorage.setItem('account',ruleForm.account)
          router.push('/')
        } else {
          ElMessage({
            message: res.data.errorMsg,
            type: 'error',
          })
        }
      })
      console.log('submit!')

    } else {
      console.log('error submit!')
    }
  })
}


const goRegister = () => {
  // 跳转注册页面
  console.log(router);
  router.push('/register')
}

</script>
<template>
  <div class="login">
    <div class="login-bg">
      <div class="login-form">
        <div class="logo">
          <img src="../assets/logo.webp" alt="">
        </div>
        <div class="form-box">
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">

            <el-form-item label="账号" prop="account">
              <el-input v-model="ruleForm.account" autocomplete="off" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                立即登录
              </el-button>
              <el-button @click="goRegister">去注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- <router-link  to="/register">去注册</router-link> -->
  </div>
</template>
<style scoped>
img {
  width: 150px;
  height: 150px;
  border-radius: 20px;
}

.login-bg {
  width: 100%;
  height: 928px;
  background-image: url('../assets/bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  align-items: center;
}

.login-form {
  width: 150px;
  height: 150px;
  background-color: white;
  margin: 0 auto;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  border-radius: 20px;
  transition: 0.5s;
  .form-box {
    display: none;
  }
}
.login-form:hover {
  width: 600px;
  height: 350px;
  border-radius: 20px;
  opacity: 1;
  transition: 0.5s;

  .form-box {
    display: block;
  }

  .logo {
    margin-left: 50px;
  } 

  .logo img {
    border-radius: 0px;
  }
}

@media screen and (max-width: 1700px){
  .login-bg {
    background-size: auto 100%;
  }
}

.logo {
  width: 150px;
  height: 150px;
  margin-right: 50px;
}
</style>